<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('固定列')}`">{{ $t('固定列') }}</t>
            <li>
                在列配置传入<span class="s-code">fixed</span>即可实现将该列固定；
                可选值:
                <span class="s-code">true / 'left' / 'right'</span>;
                <span class="s-code">true</span>表示固定在左侧；同样地，索引列配置对象
                <span class="d-code">index-config</span>也支持该配置项
            </li>
        </template>
        <sib-table
            row-key="rowId"
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData">
        </sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = ref(Array(10).fill().map((_, i) => ({
            rowId: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        })));

        return {
            indexConfig: {
                label: 'No.',
                type: 'index',
                fixed: 'left',
            },
            tableColumn: [
                { label: '姓名', code: 'name', width: 300 },
                { label: '性别', code: 'sex', width: 300 },
                { label: '年龄', code: 'age', width: 300 },
                { label: '照片', code: 'avatar', width: 800 },
                { label: '身高', code: 'height', width: 300 },
                { label: '状态', code: 'status', fixed: 'right' },
            ],
            tableData,
            templateString: `<template>
    <div class="example-box">
        <sib-table
            row-key="rowId"
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData">
        </sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const tableData = ref(Array(5).fill().map((_, i) => ({
            rowId: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        })));

        return {
            indexConfig: {
                label: 'No.',
                type: 'index',
                fixed: 'left',
            },
            tableColumn: [
                { label: '姓名', code: 'name', width: 300 },
                { label: '性别', code: 'sex', width: 300 },
                { label: '年龄', code: 'age', width: 300 },
                { label: '照片', code: 'avatar', width: 800 },
                { label: '身高', code: 'height', width: 300 },
                { label: '状态', code: 'status', fixed: 'right' },
            ],
            tableData,
        };
    },
};
<\/script>`,
        };
    },
};
</script>
